<template>
	<view class="content">


		<z-paging ref="paging" bgColor="#1F2630" @query="getList" v-model="list" :loading-more-enabled="false">
			<!--  -->
			<view class="" slot="top">
				<!-- #ifdef APP -->
				<NavBarCommon></NavBarCommon>
				<!-- #endif -->
				<view class="claimBox">
					<image src="@/static/home/right.png" alt="" class="claim1" @click="goBack" />
					<view class="claim2">{{$t('invitationcode')}}</view>
				</view>
				<u-gap></u-gap>
			</view>
			<!--  -->
			<view class="nav flex ">
				<view class="flex-1">{{$t('invitationcode')}}</view>
				<view class="flex-1">{{$t('bindingaddress')}}</view>
				<view class="flex-1">{{$t('status')}}</view>
				<view class="flex-1">{{$t('createtime')}}</view>
				<view class="flex-1">{{$t('usedTime')}}</view>
			</view>
			<view class="contentDom flex" v-for="item, index in list" :key="index" @click="showAccountHandle(item)">
				<view class="flex-1">{{ item.code }}</view>
				<view class="flex-1">{{ item.bind_address ? formatPublicKey(item.bind_address) : '---' }}</view>
				<view class="flex-1">{{ item.status == 'unused' ? '未使用' : '已使用' }}</view>
				<view class="flex-1">{{ timeFomate(item.created_at) }}</view>
				<view class="flex-1">{{  item.status == 'unused'? '': timeFomate(item.used_at) }}</view>
			</view>

			<!--  -->



			<u-popup :round="20" :show="showpopup" mode="center" @close="closeshowpopup" @open="openshowpopup">
				<!-- 	<view class="text-lg">
					钱包地址
				</view> -->
				<view class="  rounded-lg  h-[200rpx]" style="width: 700rpx;">
					<view class="p-md "
						style="text-indent: 2ch;;width: 600rpx; white-space: pre-wrap; overflow-wrap: break-word;">
						{{ showAccount }}
					</view>
				</view>

				<view class="flex  text-center" style="justify-content: center;">
					<view class="mx-2 rounded-lg"
						style="width: 300rpx;background-color: #29313C;height: 60rpx;line-height: 60rpx;color: #fff;"
						@click="copyHandle">
						复制
						<!-- <u-button @click="copyHandle" text="复制"></u-button> -->
					</view>
				</view>

				<u-gap height="10"></u-gap>
			</u-popup>

			<view class="" slot="bottom">

			</view>
		</z-paging>
	</view>
</template>

<script>
import {
	inviteCodehistory
} from '@/api/index.js'
export default {
	data() {
		return {
			list: [
				    // {
				    //   "id": 2208,
				    //   "hx": "",
				    //   "code": "DKxbdPu8PW",
				    //   "address": "DugsDMjoSwfyPKiQDFmC4D1Bq6YvLqeGRfdaASEsKFRm",
				    //   "bind_address": null,
				    //   "use_number": null,
				    //   "used_number": null,
				    //   "use_time": null,
				    //   "status": "unused",
				    //   "created_at": "2025-05-12T15:34:48.368Z",
				    //   "used_at": "2025-05-12T15:34:48.368Z"
				    // },
				    // {
				    //   "id": 2209,
				    //   "hx": "",
				    //   "code": "b2Jbqn2pYx",
				    //   "address": "DugsDMjoSwfyPKiQDFmC4D1Bq6YvLqeGRfdaASEsKFRm",
				    //   "bind_address": null,
				    //   "use_number": null,
				    //   "used_number": null,
				    //   "use_time": null,
				    //   "status": "unused",
				    //   "created_at": "2025-05-12T15:34:48.370Z",
				    //   "used_at": "2025-05-12T15:34:48.370Z"
				    // },
				    // {
				    //   "id": 2210,
				    //   "hx": "",
				    //   "code": "6YYR8dahH3",
				    //   "address": "DugsDMjoSwfyPKiQDFmC4D1Bq6YvLqeGRfdaASEsKFRm",
				    //   "bind_address": null,
				    //   "use_number": null,
				    //   "used_number": null,
				    //   "use_time": null,
				    //   "status": "unused",
				    //   "created_at": "2025-05-12T15:34:48.371Z",
				    //   "used_at": "2025-05-12T15:34:48.371Z"
				    // },
				    // {
				    //   "id": 2211,
				    //   "hx": "",
				    //   "code": "zftKaFFBpW",
				    //   "address": "DugsDMjoSwfyPKiQDFmC4D1Bq6YvLqeGRfdaASEsKFRm",
				    //   "bind_address": null,
				    //   "use_number": null,
				    //   "used_number": null,
				    //   "use_time": null,
				    //   "status": "unused",
				    //   "created_at": "2025-05-12T15:34:48.373Z",
				    //   "used_at": "2025-05-12T15:34:48.373Z"
				    // },
				    // {
				    //   "id": 2212,
				    //   "hx": "",
				    //   "code": "rn1oWymaIt",
				    //   "address": "DugsDMjoSwfyPKiQDFmC4D1Bq6YvLqeGRfdaASEsKFRm",
				    //   "bind_address": null,
				    //   "use_number": null,
				    //   "used_number": null,
				    //   "use_time": null,
				    //   "status": "unused",
				    //   "created_at": "2025-05-12T15:34:48.374Z",
				    //   "used_at": "2025-05-12T15:34:48.374Z"
				    // }
			],
			showpopup: false,
			showAccount: false
		};
	},
	methods: {
		openshowpopup() {

		},
		closeshowpopup() {

		},
		/*  */
		showAccountHandle(e) {

			if (e.status != 'used') {
				this.showpopup = true
				this.showAccount = e.code
			} else {
				uni.showToast({
					title: '已使用',
					icon: 'none'
				})
			}

		},
		copyHandle(e) {
			let text = this.showAccount
			uni.setClipboardData({
				data: text,
				success: () => uni.showToast({ title: '复制成功', icon: 'none' })
			});
			this.showpopup = false
		},


		timeFomate(dateString) {
			const date = new Date(dateString);
			// 格式化为 2025 03-03 10:20
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，所以需要加 1
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');

			return `${year} ${month}-${day} ${hours}:${minutes}`;
		},


		// 方法用于格式化 publicKey 的显示
		formatPublicKey(key) {
			if (!key) return "";
			const start = key.slice(0, 4);
			const end = key.slice(-4);
			return `${start}...${end}`;
		},
		goDetail(e) {
			console.log('e', e);
			let jsonData = JSON.stringify(e)
			/* 详情 */
			uni.navigateTo({
				url: `/pages/invitedDetail/invitedDetail?data=${jsonData}`
			})
		},
		// 数据
		async getList() {
			this.$refs.paging.complete(this.list);
			return;
			let res = await inviteCodehistory()
			console.log(res, "inviteCodehistoryApi");
			if (res.code == 200) {
				console.log(res.data, 'res.data');

				// const groupedData = res.data.reduce((result, currentItem) => {
				// 	// 检查该 uuid 是否已经存在于结果对象中
				// 	if (!result[currentItem.hx]) {
				// 		result[currentItem.hx] = [];
				// 	}
				// 	// 将当前 item 添加到对应 uuid 的数组中
				// 	result[currentItem.hx].push(currentItem);
				// 	return result;
				// }, {});
				// const groupedArrayData = Object.values(groupedData);
				// console.log(groupedArrayData, 'groupedArrayData');

				this.$refs.paging.complete(res.data);
			}
		},
		goBack() {
			uni.navigateBack()
		},
	},
	onLoad(options) {
		if (options.data) {
			this.list = JSON.parse(options.data)
		}
	},
	async onShow() { }
};
</script>


<style scoped lang="scss">
.nav {
	text-align: center;
	height: 60rpx;

	view {
		height: 60rpx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		// font-size: 24rpx;
		font-size: 18rpx;
		color: #999999;
		// line-height: 24rpx;
		line-height: 18rpx;
	}
}

.contentDom {
	height: 80rpx;
	text-align: center;

	view {
		height: 80rpx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		// font-size: 28rpx;
		font-size: 18rpx;
		color: #FFFFFF;
		// line-height: 28rpx;
		line-height: 18rpx;
	}
}


.text {
	font-family: Source Han Sans CN;
	font-weight: 300;
	font-size: 30rpx;
	color: #FFFFFF;
	line-height: 30rpx;
}

.headerBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.leftBox {
	display: flex;
	align-items: center;
	margin-left: 16rpx;
}

.oneImage {
	width: 129rpx;
	height: 129rpx;
}

.hello {
	font-weight: 800;
	font-size: 36rpx;
	color: #ffffff;
	line-height: 64rpx;
}

.recharge-tag {
	display: flex;
	justify-content: center;
	margin: 0 30rpx;

	.recharge-tag-left {
		text {
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 64rpx;
		}
	}

	.recharge-tag-right {
		text {
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 64rpx;
		}
	}
}

.mev-follow-robot-search-wrap {
	margin: 0 30rpx;
	height: 108rpx;
	background: #29313C;
	border-radius: 30rpx;
	border: 2rpx solid #6C7680;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;

	.mev-follow-robot-search-wrap-icon {
		margin: 30rpx 20rpx 30rpx 30rpx;
		width: 48rpx;
		height: 48rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.mev-follow-robot-search-wrap-input {
		display: flex;
		align-items: center;

		input {
			color: white;
		}
	}

	.mev-follow-robot-search-wrap-select {
		display: flex;
		align-items: center;

		.mev-follow-robot-search-wrap-select-label {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 24rpx;
			color: #fff;
			// color: #45E5AF;
			line-height: 64rpx;
		}

		.mev-follow-robot-search-wrap-select-icon {
			width: 20rpx;
			height: 12rpx;
			margin-left: 16rpx;
			margin-right: 36rpx;
		}
	}
}

.recharge-header {
	display: flex;
	// align-items: center;
	// justify-content: space-between;
	margin: 0 30rpx;
	justify-content: space-between;



	.recharge-header-back-icon {
		margin-right: 26rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.recharge-header-title {
		text {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 36rpx;

		}
	}

	.recharge-header-subtitle {
		// vertical-align: bottom;
		display: flex;
		align-items: end;

		/* 使元素垂直居中 */
		text {
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #45E5AF;
			// line-height: 64rpx;
		}
	}

}




/*  */
.wallet-avatar-gap {
	border-radius: 40rpx;
	background-color: #4a90e2;
	width: 80rpx;
	height: 80rpx;
	margin-right: 31rpx;
}

.content {
	width: 100%;
	min-height: 100vh;
	background-color: #1f2630;
}

.claimBox {
	display: flex;
	align-items: center;
	padding-top: 50rpx;
	justify-content: center;
	position: relative;

	.claim1 {
		position: absolute;
		left: 2%;
		width: 22rpx;
		height: 38rpx;
		// margin-left: 28rpx;
	}

	.claim2 {
		font-weight: 500;
		font-size: 36rpx;
		color: #ffffff;
		// margin-left: 275rpx;
	}
}

.addressOne {
	display: flex;
	align-items: center;
	margin-top: 59rpx;
	margin-left: 30rpx;

	.tp {
		width: 100rpx;
		height: 100rpx;
	}

	.address {
		font-weight: 300;
		font-size: 36rpx;
		color: #ffffff;
		margin-left: 21rpx;
	}

	.down {
		width: 25rpx;
		height: 14rpx;
		margin-left: 20rpx;
	}
}

.picBox {
	width: 690rpx;
	height: 420rpx;

	// background-image: url("/static/home/nine.png");
	background: url('/static/home/nine.png') no-repeat;

	background-size: 100%;

	margin-left: 30rpx;
	margin-right: 30rpx;
	margin-top: 30rpx;

	.picOne {
		display: flex;
		align-items: center;
		padding-top: 30rpx;

		.pic1 {
			width: 44rpx;
			height: 48rpx;
			margin-left: 22rpx;
		}

		.num1 {
			font-size: 30rpx;
			color: #ffffff;
			margin-left: 11rpx;
		}

		.num2 {
			font-size: 48rpx;
			color: #ffffff;
			margin-left: 45rpx;
		}

		.pic2 {
			width: 35rpx;
			height: 23rpx;
			margin-left: 20rpx;
		}
	}

	.drawDownBox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 63rpx;

		.drawOne {
			// margin-left: 46rpx;
			text-align: center;

			.one {
				font-size: 36rpx;
				color: #ffffff;
			}

			.one1 {
				font-size: 24rpx;
				color: #8e8e8f;
			}
		}

		.drawTwo {
			// margin-left: 125rpx;
			text-align: center;

			.two {
				font-size: 36rpx;
				color: #ffffff;
			}

			.two2 {
				font-size: 24rpx;
				color: #8e8e8f;
			}
		}

		.drawThree {
			// margin-left: 134rpx;
			text-align: center;

			.three {
				font-size: 36rpx;
				color: #ffffff;
			}

			.three3 {
				font-size: 24rpx;
				color: #8e8e8f;
			}
		}
	}
}

.progress-container {
	width: 600rpx;
	display: flex;
	margin: 0 auto;
	align-items: center;
	// background-color: #333;
	border-radius: 10px;
	// overflow: hidden;
	// margin-left: 45rpx;
	// margin-top: 60rpx;
	position: relative;
	flex-direction: column;
}

.progress-bar {
	width: 600rpx;
	height: 20rpx;
	// background-color: #ffcc00;
	border-radius: 12px;

	background: linear-gradient(to right, #ffcc00 var(--difference-percentage), #1F2631 0%);
	/* 黄色 */
	transition: width 0.5s ease-in-out;
}

.percentage {
	// position: absolute;
	// top: 41%;


	// left: 40%;
	// right: 10px;

	font-size: 72rpx;
	color: #fcd434;
}

.submitBox {
	width: 690rpx;
	height: 88rpx;
	background: #29313C;
	border-radius: 44rpx;
	margin-top: 60rpx;
	margin-left: 30rpx;


	.submit {
		font-weight: bold;
		font-size: 36rpx;
		color: #0d081a;
		line-height: 80rpx;
		text-align: center;
	}
}

.active {
	background: #fcd434 !important;
}
</style>